<template>
  <div class="b-bar">
    <div class="b-title">{{title}}</div>
    <div ref="chart" class="b-chart"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';

  import {getMax} from "@/common/js/util";

  export default {
    name: "b-bar",
    props: {
      title:{
        type:String,
        default:'建筑物年代'
      }
    },
    components: {},
    data() {
      return {
        chart:null,
        chartOption:{}
      }
    },
    methods: {
      changeChart(x=[],data=[]){
        let max=getMax(data);
        max=max?max*1.2:10;

        let defaultValue=data.map(_=>max);

        this.chart.setOption( {
          color:['#A1D6E6'],

          tooltip: {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter:function(prams) {

              return prams[0].name+"：" + prams[0].value

            }
          },
          grid:{
            left:0,
            top:20,
            right:0,
            bottom:20
          },
          legend: {
            show:false,
            data:['实际值','预警标准'],
            textStyle:{
              color:'#333',
            }
          },
          xAxis: [
            {
              type: 'category',
              data: x,
              axisPointer: {
                type: 'shadow'
              },
              splitLine: {show: false},
              axisLine: {
                show:false,
                lineStyle: {
                  color: '#555'
                },
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                interval:0,
                formatter: '{value} ',
                color: '#A1D6E6'
              },
            }
          ],
          yAxis: [
            {
              show:false,
              type: 'value',
              name: '数量',
              min: 0,
              max: max,
              interval: 10,
              axisLabel: {
                show:false
              },
              splitLine: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitArea: {
                show: false,
              }
            },
            {
              type: 'value',
              gridIndex: 0,
              splitNumber: 12,
              splitLine: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              splitArea: {
                show: false,
              }
            }
          ],
          series: [
            {
              name:'实际值',
              type:'bar',
              barWidth:30,
              data:data
            },
            {
              name: '背景',
              type: 'bar',
              barWidth: 30,
              xAxisIndex: 0,
              yAxisIndex: 1,
              barGap: '-100%',
              data: defaultValue,
              itemStyle: {
                normal: {
                  color: '#0C1121'
                }
              },
              zlevel: -1
            },
          ]
        });
      }
    },
    created(){},
    mounted(){
      this.chart=echarts.init(this.$refs.chart);
      this.changeChart()
    },
    beforeDestroy(){
      if(this.chart)
        this.chart.dispose();
      this.chart=null;
    }
  }
</script>

<style lang="scss" scoped>

  .b{

    &-bar{
      padding: 20px 28px;
      background: $border-1;
      border-radius: 10px;

      display: flex;
      flex-direction: column;
    }


    &-title{
      font-weight: bold;
      font-size: 1.1rem;


      white-space: nowrap;

    }

    &-chart{
      flex: auto;
    }
  }

</style>